<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>147-css中英文换行总结</title>
    <style></style>
  </head>

  <body>
    <p class="p1">1.This is a dog.This is a dog.This is a dog.只对英文起作用，以字母作为换行依据</p>
    <p class="p2">2.This is a dog.This is a dog.This is a dog.只对英文起作用，以单词作为换行依据</p>
    <p class="p3">3.This is a dog.This is a dog.This is a dog.只对中文起作用，强制换行</p>
    <p class="p4">4.This is a dog.强制不换行，都起作用</p>
    <p class="p5">5.不换行，超出部分隐藏且以省略号形式出现</p>
    <style>
      .p1 {
        word-break: break-all;
        width: 150px;
      } /*只对英文起作用，以字母作为换行依据*/

      .p2 {
        word-wrap: break-word;
        width: 150px;
      } /*只对英文起作用，以单词作为换行依据*/

      .p3 {
        white-space: pre-wrap;
        width: 150px;
      } /*只对中文起作用，强制换行*/

      .p4 {
        white-space: nowrap;
        width: 10px;
      } /*强制不换行，都起作用*/

      .p5 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100px;
      } /*不换行，超出部分隐藏且以省略号形式出现*/
    </style>
  </body>
</html>
